<template>
  <div class="panel" style="width: 100%;">
    <Title title="当月营业额分析"></Title>
    <div class="chart_container" style="width: 100%; height: calc(100% - 30px)">
      <div id="yye" class="echart"></div>
    </div>
  </div>
</template>

<script>
  import Title from './Title'
  import api from '@/utils/api.js'
  export default {
    name: 'yye',
    components: {
      Title
    },
    data() {
      return {
        echarts: '',
        option:  {
          grid: {
            top: 35,
            left: '3%',
            right: '3%',
            bottom: 13,
            containLabel: true
          },
          xAxis: {
            data: [],
            axisLabel: {
              color: '#111',
              fontSize: 14,
              fontWeight: 500
            }
          },
          yAxis: {
            nameTextStyle: {
              padding: [0, 0, 0 , -22],
              color: '#222'
            },
            axisLabel: {
              color: '#222',
            },
            name: '单位(元)',
            splitNumber: 5,
            splitLine: {
              lineStyle:{
                type:'dashed'
              }
            }
          },
          tooltip: {
            show: true,
            padding: 0,
            borderWidth: 0,
            backgroundColor: 'rgba(50,50,50,0)',
            formatter: this.toolTipFormatter,
            trigger: 'item',
            axisPointer: {
              type: 'line',
              z: 0,
              lineStyle: {
                color: 'rgba(234, 245, 253, 0.8)',
                width: 20,
                type: 'solid',
              }
            },
            position: 'top',
            /*position: function (point, params, dom, rect, size) {
              let {contentSize, viewSize} = size
              return [point[0]-25, (1-(params[0].value/900)) * 100 + '%']  //返回x、y（横向、纵向）两个点的位置
            },*/
            extraCssText: 'box-shadow: none'
          },
          series: [
            {
              type: 'bar',
              barWidth: 16,
              itemStyle: {
                color: this.setColor(),
                borderRadius: [8, 8, 0, 0]
              },
              backgroundStyle: {
                width: 30
              },
            }
          ]
        },
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initEcharts()
        this.setInitOptions()
        this.getRemoteData()
      })
      this.screenAdapt()
    },
    methods: {
      setColor() {
        return new this.$echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [{offset: 0, color: '#FFD9B7'}, {offset: 1, color: '#FF7B83'}]
        )
      },
      initEcharts() {
        this.echarts = this.$echarts.init(document.getElementById('yye'), null, {devicePixelRatio: 2.5})
      },
      setInitOptions() {
        this.echarts.setOption(this.option)
      },
      setDataOptions(xAxisData, seriesData) {
        let options = {
          xAxis: {
            data: xAxisData
          },
          series: [
            {
              data: seriesData
            }
          ]
        }
        this.echarts.setOption(options)
      },
      screenAdapt() {
        window.addEventListener('resize', () => {
          this.echarts.resize()
        })
      },
      getRemoteData() {
        let xAxisData = ['1', '2', '3', '4', '5', '6', '7', '8','9', '10',11, 12,13,14,15,16,17,18,19,20,21,22,23,24, 25,26,27,28,29,30]
        let seriesData = [3180, 2000, 1000, 0, 0, 0]
        let params = {
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1
        }
        api.salesVolumeWhitDay(params).then(res => {
          seriesData = res.data.map(item => item.num || 0)
          this.setDataOptions(xAxisData, seriesData)
        })
      },
      toolTipFormatter(params) {
        console.log(params)
        let htmlStr = `<div class="bar_tool_box triangleBottom colorFF7B83">${params.value}</div>`
        return htmlStr
      }
    }
  }
</script>

<style lang="scss">
  .bar_tool_box.colorFF7B83{
    background-color: #FF7B83;
  }
</style>
